<!--
data:
{link:[{href:"",title:"}],
keyword:{url:""},
user:{infoUrl:"/magical_lowcode/openapi/b9a3fa63ae2541359e705d088e80108b/user/get",loginUrl:"",registerUrl:""}
}

-->
<template>
  <el-row class="mc-jd-header">
    <el-col class="mc-jd-header-left" :xs="24" :sm="12">
      <mc-a v-for="(item,idx) in dataMap.link" :key="idx+item.href" :url="item.href" :style="{color:item.active?'#33c182':''}">{{item.title}}</mc-a>
    </el-col>
    <el-col class="mc-jd-header-right" :xs="24" :sm="12">
      <el-dropdown  trigger="click" v-if="mcAllowQuery">
        <div class="el-dropdown-link" style="cursor: pointer;color: #409EFF;display: inline-block;">
          <el-input class="mc-jd-header-search" @focus="clickSearch"  v-model="keyword" placeholder="关键词：如酒店名/位置" size="small">
          </el-input>
        </div>
        <el-button icon="el-icon-search" @click="beginSearch" size="small" class="mc-green-bt" ></el-button>
        <el-dropdown-menu slot="dropdown" class="mc-jd-header-dropdown">
          <el-dropdown-item>
          <mc-el-row  style="width:400px;max-height:400px;overflow:auto;" :data.sync="keywordList" mc-version="v2" :mc-page="{'open':false}"
                     :mc-config="{'url':dataMap.keyword.url,'method':'post','params':[],'fields':[],'tmp':{'stage':'db','apiUuid':'','tableUuid':''},'mcIntervalSeconds':0,'watch':'','orders':[]}" @after-render-data="afterRender">
            <template #row="scope">
              <mc-el-col class="mc-el-row-body" style="padding:3px" mcstyle="ab-unit-top:px" :span="24">
                <el-card :header="scope.row.name">
                  <mc-el-row :data.sync="scope.row.children" mc-version="v2">
                    <template #row="children">
                      <el-button @click="chooseKeyword(children.row)"  type="text">{{children.row.name}}</el-button>
                    </template>
                  </mc-el-row>
                </el-card>
              </mc-el-col>
            </template>
          </mc-el-row>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown style="margin-left: 20px" trigger="click">
        <div class="el-dropdown-link">
          <el-button v-if="!isLogin" class="mc-jd-header-right-login" size="small" @click="clickLogin">登录</el-button>
        </div>
        <el-dropdown-menu slot="dropdown" :class="hideLoginMenu?'mc-hide-el-menu header-login-pane':'header-login-pane'">
          <el-form label-width="60px">
            <el-form-item label="用户名">
              <mc-input v-model="mobile" placeholder="请输入用户名"></mc-input>
            </el-form-item>
            <el-form-item label="密  码">
              <mc-input v-model="password" placeholder="请输入密码" type="password"></mc-input>
            </el-form-item>
            <el-form-item label-width="0">
              <el-row>
                <el-col :span="24">
                  <el-button class="mc-header-login-btn" @click="login">立即登录</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-dropdown-menu>
      </el-dropdown>

      <el-button @click="goRegister" style="margin-left: 20px" v-if="!isLogin" class="mc-green-bt" size="small">免费注册</el-button>

      <el-dropdown style="margin-left: 20px" @command="handleCommand">
        <span class="el-dropdown-link">
          <span v-if="isLogin" class="mc-header-user">{{user.name}}<i class="el-icon-arrow-down el-icon--right"></i></span>
        </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
    </el-col>
  </el-row>
</template>

<script>
  import McElRow from "../McElRow.vue"
  import McElCol from "../McElCol.vue"
  import McA from "../McA.vue"
  import McInput from "../McInput.vue"
  export default {
    name: 'mc-jd-header',
    data () {
      return {
        keywordList:[],
        keyword:"",
        dataMap:this.data,
        isLogin:true,
        user:{name:""},
        hideLoginMenu:false,
        mobile:"",
        password:""
      }
    },
    components:{
      McElRow,
      McElCol,McA,McInput
    },
    //暂时预定10个参数 大部分用户2-3个就够了
    props: {
      'data' : {type:Object,default:{link:[]}},
      /*是否允许查询区域*/
      'mcAllowQuery':{type:Boolean,default:false}
    },
    mounted () {
      this.userInfo();
    },
    //监听下变更 再动态修改url 经常会出现 绑定了输入框的值
    watch:{

    },
    methods:{
      goRegister(){
        var request = this.$magicaltool.request;
        request.util.redirect(this.dataMap.user.registerUrl,"_self")
      },
      handleCommand(command){
          if(command=='logout'){
            this.logout();
          }
      },
      //退出登录
      logout(){
        var _t = this;
        var request = this.$magicaltool.request;
        request.axios({cache:false,$vue:this,url:this.dataMap.user.logoutUrl,method:'post',param:{}})
          .then(function(res){
            if(res.flag){
              _t.isLogin=false;
              _t.user.name = "";
              _t.$emit("logout",{})
            }else {
              _t.isLogin=true;
            }
          })
      },
      login(){
        var _t = this;
        var request = this.$magicaltool.request;
        request.axios({cache:false,$vue:this,url:this.dataMap.user.loginUrl,method:'post',param:{mobile:this.mobile,password:this.password}})
          .then(function(res){
            if(res.data){
              _t.isLogin=true;
              _t.user.name = res.data.name;
              _t.hideLoginMenu=true;
              _t.mobile="";
              _t.password="";
              _t.$emit("login",{})
            }else {
              _t.isLogin=false;
            }
          })
      },
      clickLogin(){
        this.hideLoginMenu=false;
      },
      clickSearch(){
      },
      beginSearch(){
        this.$emit("search",{keyword:this.keyword})
      },
      userInfo:function () {//infoUrl
        var _t = this;
        var request = this.$magicaltool.request;
        request.axios({cache:true,$vue:this,url:this.dataMap.user.infoUrl,method:'post',param:{}})
          .then(function(res){
            if(res.data){
                _t.user.name = res.data.name;
            }else {
                _t.isLogin=false;
            }
          })
      },
      chooseKeyword:function (item) {
        this.keyword=item.name;
        this.$emit("search",{keyword:this.keyword})
      },
      afterRender : function(param){
        var _this = this;
        var parent = param.res.data.parent;
        var children = param.res.data.children;

        if(parent.length > 0){
          parent.forEach( p => {
            p.children = children.filter(c => c.pid == p.id)
          })
        }
        this.keywordList = parent;
      },
      getData:function () {
        return {keyword:this.keyword}
      },
      focusLink:function (title) {
        var link = this.dataMap.link;
        for(var i=0;i<link.length;i++){
          if(link[i].title==title){
            this.$set(link[i],"active",true)
          }else{
            this.$set(link[i],"active",false)
          }
        }
      }
    }
  }
</script>

<style lang="scss">

  .mc-jd-header-left, .mc-jd-header-right {
    height: 74px;
    display: flex;
    align-items: center;
  }
  .mc-jd-header-left a {
    text-decoration-line: none;
    color: #333333;
    margin-left: 20px;
  }
  .mc-jd-header-left {
    justify-content: flex-start;
  }
  .mc-jd-header-right {
    justify-content: flex-end;
  }
  .mc-jd-header-search {
    width: 250px;
  }
  .mc-jd-header-right-login {

    background: #FFFFFF !important;
    color: #41CE8F!important;

  }
  .mc-green-bt{
    background: #33C182!important;
    color: #FFFFFF!important;
  }
  .mc-hide-el-menu{
    display: none;
  }
  .header-login-pane{
    padding: 20px 10px 10px 10px !important;
  }
  .mc-header-user{
    padding: 10px;magin-left:10px
  }
  .mc-header-login-btn{
    width:100%;
    background: #33C182!important;
    color: #FFFFFF!important;
  }
  .mc-jd-header-dropdown .el-dropdown-menu__item{
    line-height: unset;
    padding: 10px;
  }
  .mc-jd-header-dropdown .el-dropdown-menu__item:hover{
    background: unset!important;
  }
  .mc-jd-header-dropdown{
    .el-card__header{
      padding: 8px 20px !important;
    }
    .el-card__body{
      padding: 8px 20px !important;
    }
  }
</style>
